<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./static/css/base.css">
    <style>
        body {
            margin: 10px;
        }

        .my_table {
            border-collapse: collapse;
            width: 100%;
            border: 1px #ddd solid;
        }

        .my_table th,
        .my_table td {
            height: 42px;
            padding: 5px 10px;
        }

        .my_table thead {
            background: #f2f2f2;
        }

        .my_table tbody tr:nth-child(even) {
            background: #f2f2f2;
        }

        .my_table tbody tr {
            cursor: pointer;
        }

        .my_table tbody tr:hover {
            background: orangered;
            color: #fff;
        }
    </style>
</head>

<body>


    <div class="" id="app">
        <table class="my_table" border="1">

            <thead>
                <tr>
                    <th>材料</th>
                    <th>厂家</th>
                    <th>材料编号</th>
                    <th>底纸</th>
                    <th>胶水</th>
                    <th>克重</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in dataList" :key="index" @click="handlerItemClick(item)">
                    <td>{{item.material_name}}</td>
                    <td>艾力</td>
                    <td>{{item.material_id}}</td>
                    <td>白格拉辛背印</td>
                    <td>可溶胶水</td>
                    <td>80G</td>
                </tr>



            </tbody>

        </table>
    </div>



    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->


    <script>
        var vueApp = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                dataList: [],
            },
            created: function () {
                var urlMap = this.getUrlParamsMap();
                var categoryId = urlMap['category_id'] || '';

                // if (categoryId.length == 0) {
                //     top.window.layer.close();
                //     top.window.layer.alert('参数缺失,自动关闭弹框!');
                //     return false;
                // }

                //发送ajax,获取当前类别下的型号列表
                var arr = [{
                    category_id: 1,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00011',
                    material_name: "铜版纸"

                }, {
                    category_id: 2,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00021',
                    material_name: "铜版纸"
                }, {
                    category_id: 3,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00031',
                    material_name: "铜版纸"
                }, {
                    category_id: 4,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00041',
                    material_name: "铜版纸",
                }, {
                    category_id: 1,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00011',
                    material_name: "铜版纸"

                }, {
                    category_id: 2,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00021',
                    material_name: "铜版纸"
                }, {
                    category_id: 3,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00031',
                    material_name: "铜版纸"
                }, {
                    category_id: 4,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00041',
                    material_name: "铜版纸",
                }, {
                    category_id: 1,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00011',
                    material_name: "铜版纸"

                }, {
                    category_id: 2,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00021',
                    material_name: "铜版纸"
                }, {
                    category_id: 3,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00031',
                    material_name: "铜版纸"
                }, {
                    category_id: 4,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00041',
                    material_name: "铜版纸",
                }, {
                    category_id: 1,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00011',
                    material_name: "铜版纸"

                }, {
                    category_id: 2,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00021',
                    material_name: "铜版纸"
                }, {
                    category_id: 3,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00031',
                    material_name: "铜版纸"
                }, {
                    category_id: 4,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00041',
                    material_name: "铜版纸",
                }, {
                    category_id: 1,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00011',
                    material_name: "铜版纸"

                }, {
                    category_id: 2,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00021',
                    material_name: "铜版纸"
                }, {
                    category_id: 3,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00031',
                    material_name: "铜版纸"
                }, {
                    category_id: 4,
                    category_name: '多色印刷+黑色打印',
                    material_id: 'P00041',
                    material_name: "铜版纸",
                }].filter(function (item) {
                    return item.category_id.toString() == categoryId;
                });

                console.log(categoryId);

                this.dataList = arr;



            },
            methods: {
                getUrlParamsMap: function () {
                    var url = location.search; //获取url中"?"符后的字串
                    var map = {};
                    if (url.indexOf("?") != -1) {
                        var str = url.split('?')[1];
                        var strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            map[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return map;
                },
                handlerItemClick: function (item) {
                    setTimeout(function () {
                        parent.window.layer.closeAll();
                    }, 0);
                    parent.window.vueApp.materialSelectedCallBack(item);

                }
            }

        });
    </script>


</body>

</html>